<template>
  <ul>
    <li>
      <lbr-icon
        type="lbr-icon-icon-tianjia"
        color="#ffb403"
        :size="40"
      ></lbr-icon>
      <span>lbr-icon-icon-tianjia</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-icon-saoyisao"
        color="red"
        :size="30"
        
      ></lbr-icon>
      <span>lbr-icon-icon-saoyisao</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-icon-shezhi"
        color="#000"
        :size="20"

      ></lbr-icon>
      <span>lbr-icon-icon-shezhi</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-icon-guanbi2"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-icon-guanbi2</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-shu"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-shu</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-locationfill"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-locationfill</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-search"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-search</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-like"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-like</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-question"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-question</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-friend"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-friend</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-roundadd"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-roundadd</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-wode"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-wode</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-kaiyanjing"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-kaiyanjing</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-biyan"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-biyan</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-add"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-add</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-move"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-move</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-gouwuche"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-gouwuche</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-lajitong"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-lajitong</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-arrow-right"
        color="#000"
        :size="40"
      ></lbr-icon>
      <span>lbr-icon-arrow-right</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-houtui"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-houtui</span>
    </li>
    <li>
      <lbr-icon
        type="lbr-icon-loading"
        color="#000"
        :size="40"

      ></lbr-icon>
      <span>lbr-icon-loading</span>
    </li>
    <li class="bt_classify_name_empty" style="visibility: hidden"></li>
  </ul>
</template>
<script>
// import {LbrButton} from '@/packages/index'
export default {
  name: "button",
  data() {
    return {
      value: ""
    };
  }
  // components:{
  //   LbrButton
  // }
};
</script>
<style scoped lang='scss'>
ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  li {
    width: 33.33%;
    border: 1px solid #eee;
    background: #fff;
    height: 120PX;
    box-sizing: border-box;
    position: relative;

    i{
      position: absolute;
      left: 50%;top: 50%;
      transform: translate(-50%,-50%);
    }
    span{
      position: absolute;
      bottom: 0;left: 0;width: 100%;
      text-align: center;
    }

  }
  .bt_classify_name_empty {
    width: 0px;
    height: 0px;
  }
}
</style>